<script>
	export let checked;
</script>

<style>
	.input-output-toggle {
		display: grid;
		user-select: none;
		flex: 0;
		grid-template-columns: 1fr 40px 1fr;
		grid-gap: 0.5em;
		align-items: center;
		width: 100%;
		height: 42px;
		border-top: 1px solid var(--second);
	}

	input { display: block }
	span { color: #ccc }
	.active { color: #555 }
</style>

<label class="input-output-toggle">
	<span class:active={!checked} style="text-align: right">input</span>
	<input type="checkbox" bind:checked>
	<span class:active={checked}>output</span>
</label>